import { getDom } from "./getDom";
import { dragEvent } from "../mouse/index";
import { DragEvent } from '../@types/index'

/**
 * 设置dom样式
 * @param element 被设置的元素
 * @param width 宽度
 * @param height 高度
 * @param x 位置x
 * @param y 位置y
 */
export const setDomRect = (
    element:string | object ,
    width:number | string | null,
    height:number | string | null,
    x:number | string | null,
    y:number | string | null
) => {
    const dom = getDom(element)
    if(!dom) return
    // @ts-ignore
    dom.style.height = typeof height === 'number' ? height + 'px' : height
    // @ts-ignore
    dom.style.width = typeof width === 'number' ? width  + 'px'  :  width
    // @ts-ignore
    dom.style.top = typeof y === 'number' ? (y < 0 ? 0 : y) + 'px' : y
    // @ts-ignore
    dom.style.left = typeof x === 'number' ? x + 'px' : x
}
/**
 * 移动dom元素
 * @param {string | object} element 选取元素
 * @param {number} setElement 目标元素
 * @param callBack 回调函数
 */
export const moveDom = (element:string | object, setElement:string | object, callBack:Function = () => {}) => {
    const dom = getDom(element)
    const setDom = getDom(setElement)
    if(!dom || !setDom) return
    // @ts-ignore
    dragEvent(dom,setDom, false,(event:DragEvent) => {
        const { targetElementPosition,dragX,dragY } = event
        const { width,height,left,top } = targetElementPosition // 鼠标按下Dom初始值
        setDomRect(setDom, width, height, left + dragX, top + dragY)
        callBack && callBack(event)
    })
}
/**
 * 改变dom大小
 * @param element 鼠标选取元素
 * @param targetDom 控制目标元素
 * @param direction 可控方向
 * @param minWidth  最小宽度
 * @param minHeight 最小高度
 * @param callBack 回调函数
 */
export const resizeDom = (
    element:string,
    targetDom:string,
    direction:string = 'both',
    minWidth:number = 0,
    minHeight:number = 0,
    callBack:Function = () => {}
) => {
    const dom = getDom(element)
    const setDom = getDom(targetDom)
    if(!dom || !setDom) return
    // @ts-ignore
    dragEvent(dom,setDom,true,(event:DragEvent) => {
        const { targetElementPosition,dragX,dragY,mouseDownPosition,targetElementLivePosition } = event
        const { width,height,left,top } = targetElementPosition // 鼠标按下Dom初始值
        const { x,y } = mouseDownPosition // 鼠标按下鼠标初始值
        // @ts-ignore
        const isTop = ( y - top <= 20)  // 鼠标在上边界
        // @ts-ignore
        const isLeft = ( x - left <= 20)  // 鼠标在左边界
        const disabledLeft = (width - dragX <= minWidth) && isLeft
        const disabledTop = (height - dragY <= minHeight) && isTop
        if(direction === 'both'){
            setDomRect(setDom,
                isLeft ? width - dragX : width + dragX,
                isTop ? height - dragY : height + dragY,
                isLeft && !disabledLeft ? left + dragX : targetElementLivePosition.left,
                isTop && !disabledTop? top + dragY : targetElementLivePosition.top,
            )
        }
        if (direction === 'col'){
            if(disabledTop) return
            setDomRect(setDom,
                width,
                isTop ? height - dragY : height + dragY,
                left,
                isTop? top + dragY : top,
            )
        }
        if (direction === 'row'){
            if(disabledLeft) return
            setDomRect(setDom,
                isLeft ? width - dragX : width + dragX,
                height,
                isLeft  ? left + dragX : left,
                top,
            )
        }
        callBack && callBack(event)
    })
}
